<template>
  <div>
    御剑乘风来,除魔天地间!===
    <input type="text" />
    <div v-vv="val"></div>
    <div :key="item.id" v-for="item in list">
      <img :src="item.img" alt />
      {{ item.title }}
    </div>
    <div v-loading="list.length ==0">正在加载。。。。</div>
    <img v-errorimg="img" src="http://ajax-api.itheima.net/images1/4.webp" alt="">
  </div>
</template>
<script>
import img from './assets/logo.png'
import zidingvue from './ziding/ziding.vue'
import axios from 'axios'
export default {
  name: '',
  components: {
  },
  data () {
    return {
      val: '我是一个值',
      list: [],
      val2: '正在加载。。。。',
      img
    }
  },
  created () {
    console.log(this.$parent)
    this.getnew()
  },
  directives: {
    vv: {
      inserted (el, binding) {
        console.log(el, binding);
        el.innerHTML = binding.value
      }
    },
    loading: {
      inserted (el, binding) {
        console.log(el, binding);
        el.classList.add('active')
      },
      update (el, binding) {
        setTimeout(() => {
          el.style.display = 'none'
        }, 3000)
      }
    },
    errorimg:{
      inserted(el,binding){
        console.log(el,binding);
        el.onerror=function(){
          el.src=binding.value
        }
      }
    }
  },
  computed: {
  },
  methods: {
    async getnew () {
      const res = await axios('http://hmajax.itheima.net/api/news')
      console.log(res);
      this.list = res.data.data
    }
  }
}

</script>
<style lang='less'  scoped>
.active {
  width: 100vw;
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  background: rgba(150, 150, 150, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}
</style>
